<template>
  <div class="specialLocal-product">
    <scroll
      ref="verticalScroll"
      :data="resListOther"
      :pullDownRefresh="true"
      :pullUpLoad="true"
      @pullingDown="onPullingDown"
      @pullingUp="onPullingUp">

<!-- 顶部banner -->
      <div>
        <div class="product-list" v-show="atlasList">
          <slider :list="atlasList" :show-dot="atlasList.length > 1">
            <div v-for="(item, index) in atlasList" :key="index">
              <img v-lazy="item" width="100%" height="358px">
            </div>
          </slider>
        </div>


<!-- 商品名、简介、价格 -->
        <div class="productSummary">
          <div class="productSummaryLeft">
            <h4>{{resList.name}}</h4>
            <div class="summaryPrice">
              <span class="prace">¥{{resList.price}}</span>
              <!-- <span class="alreadyBought">1200人购买</span> -->
            </div>
            <span class="summary">{{resList.intro}}</span>
          </div>
        </div>

<!-- 本店铺的其他商品 -->
        <div class="transverse-scroll">
          <p>{{resList.storeName}}的其他商品</p>
          <div class="product-list" >
            <grid :cols="2">
              <grid-item v-for="(item, index) in resListOther" :key="index" @click.native="clickMore(item.id, item)">
                <div class="product-item">
                  <img v-lazy="item.thumbUrl" alt="">
                  <div class="product-text">
                    <h4>{{item.name}}</h4>
                    <span>¥{{item.price}}</span>
                  </div>
                  <span class="comment">共{{item.commentCount}}条评价</span>
                </div>
              </grid-item>
            </grid>
          </div>
        </div>
      </div>
    </scroll>
  </div>
</template>

<script type='text/ecmascript-6'>
import Scroll from '@/components/scroll/scroll'
import Slider from '@/components/slider/slider'
import Comment from '@/components/comment/comment'
import { Grid, GridItem, TransferDomDirective as TransferDom } from 'vux'
import axios from '@/api/axiosApi'
import { localUser } from '@/assets/js/local'

export default {
  data () {
    return {
      item: {},
      resListOther: [],
      resList: [],
      options: {
        getThumbBoundsFn (index) {
          let thumbnail = document.querySelectorAll('.top-wrapper')[0]
          let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
          let rect = thumbnail.getBoundingClientRect()
          return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
        }
      }
    }
  },
  props: {
    commentDataList: {
      type: Array,
      default: []
    },
    atlasList: {
      type: Array,
      default: []
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Scroll,
    Slider,
    Comment,
    Grid,
    GridItem
  },
  created () {
    this.pageNum = 1
    this.pageSize = 10
  },
  mounted () {
    this.$refs.verticalScroll.$el.style.height = (window.innerHeight - 40) + 'px'
    this.getSpecialLocalProductListOther()
    this.getSpecialLocalProductList()
  },
  methods: {
// 商品其他商品
    getSpecialLocalProductListOther () {
      let param = {
        target_type: 2,
        belongStore: this.resList.storeId,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      axios.get(this, '/v1/featureProduct/', param, (res) => {
        if (res.length === 0) {
          if (this.pageNum === 1) {
            if (this.$refs.verticalScroll) {
              this.$refs.verticalScroll.hiddenPullDown()
            }
          } else {
            this.pageNum--
            if (this.$refs.verticalScroll) {
              this.$refs.verticalScroll.hiddenPullUpLoad()
            }
          }
        } else {
          if (this.pageNum >= 1) {
            this.resListOther = this.resListOther.concat(res)
          } else {
            this.resListOther = res
          }
        }
      })
    },
// 加入购物车时底部弹框数据/当前页面数据
    clickMore (id, item) {
      let params = {
        thumbUrl: item.thumbUrl,
        price: item.price,
        name: item.name,
        goodId: id
      }
      this.$emit('clickMore', params)
      this.$router.replace(`/specialLocalProductDetail/${id}`)
      let param = {
        target_type: 2,
        id: id
      }
      axios.get(this, '/v1/featureProduct/', param, (resList) => {
        this.resList = resList[0]
      })
      this.$refs.verticalScroll.scrollTo(0, 0, 200)
    },
    moreComment () {
      this.$emit('moreComment', 2)
    },
    // 点击其他商品，路由跳转
    commentAll (item) {
      if (localUser.get('id') == null) {
        this.$vux.toast.text('请先登录', 'middle')
        this.$router.push('/login')
        return
      }
      this.$store.commit('SET_CURRENT_COMMENT', item)
      this.$router.push(`/cart/productCommentDetails/4/${item.userId}`)
    },
    gotoUser (item) {
      if (localUser.get('id') == null) {
        this.$vux.toast.text('请先登录', 'middle')
        this.$router.push('/login')
      } else {
        this.$router.push(`/archives/${item.userId}`)
      }
    },
    // info主页面商品信息
    getSpecialLocalProductList () {
      let param = {
        target_type: 2,
        id: this.$route.params.id
      }
      axios.get(this, '/v1/featureProduct/', param, (resList) => {
        this.resList = resList[0]
      })
    },
    onPullingUp () {
      this.pageNum++
      this.getSpecialLocalProductListOther()
    },
    onPullingDown () {
      this.pageNum = 1
      this.getSpecialLocalProductListOther()
    },
    // previewImage () {
    //   this.$refs.previewer.show(0)
    // },
    preImgLoaded () {
      this.$vux.loading.hide()
    }
  }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'

.specialLocal-product{
  padding-top 60px
  .productSummary{
    text-align left
    .productSummaryLeft{
      padding 20px 15px
      background #fff
      h4{
        font-size $font-size-large
      }
      .summary{
        font-size $font-size-desc
      }
      .summaryPrice{
        display flex
        justify-content space-between
        align-items flex-end
        margin-top 10px
        .prace{
          font-size $font-size-large
          color $color-theme
        }
        .alreadyBought{
          font-size $font-size-small
          color $color-text-2
        }
      }
    }
  }
  .productComment{
      background #fff
      padding 10px 10px
      margin 10px 0
      text-align left
      .moreFooter{
        border-top 1px dashed lightgrey
        display flex
        justify-content center
        align-items center
        width 90%
        text-align center
        margin 0 auto
        font-size $font-size-desc
        color $color-text-2
        padding 10px 0 0 0
      }
      p{
        color $color-text-1
        font-size $font-size-title
        padding-bottom 10px
      }
    }
  }
  .transverse-scroll{
    background #fff
    margin 10px 0
    padding 10px 10px
    text-align left
    p{
      color $color-text-1
      font-size $font-size-title
      margin 5px 0 5px 5px
    }
    .scrollRecom{
      display flex
      background #fff
      margin-bottom 10px
      .recommend{
        width 200px
        padding 0 5px
        position relative
        img:first-child{
          width 200px
          height 120px
          dispaly flex
          justify-content center
          // border-radius 8px
        }
        .iconPic{
          position absolute
          top 5px
          left 10px
          width 50px
          z-index 100
        }
        .centent{
          overflow hidden
          text-overflow ellipsis
          display -webkit-box
          -webkit-line-clamp 2
          -webkit-box-orient vertical
          font-size $font-size-desc
          color $color-text-2
        }
      }
    }
  }

.product-list{
    background #fff
    .product-item{
      background rgba(0, 0, 0, 0.1)
      position relative
      display:flex;
      flex-direction: column;
      align-items: center;
      margin 0 2px 4px
      img{
        width 94%
        height 180px
        padding 5px
      }
      .product-text {
        width 80%
        display flex
        flex-direction column
        align-items flex-start
        h4{
          color $color-text-1
          font-size $font-size-title
          margin 5px 0
          text-align left
          no-wrap()
          width 100%
        }
        span{
          color $color-level
          font-size $font-size-title
          padding 6px 0
        }
      }
      .comment {
        position absolute
        right 5px
        bottom 18px
        color $color-text-2
        font-size $font-size-small
      }
    }
  }
</style>

<style lang='stylus'>
  .transverse-scroll .product-list .weui-grid:before {
    border none !important
  }

  .transverse-scroll .product-list  .weui-grids:after {
    border none  
  }
</style>